<template>
  <div>
    <div id="main" style="height: 400px; padding-top:100px;"></div>
  </div>
</template>

<script>
import { http, changelist, articlebychannel } from "../api/api";
export default {
  mounted() {
    // 获取文章分类信息的函数
    this.getdata();
  },
  methods: {
    viewopen(arr1, arr2) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = {
        color: [
          "#c23531",
          "#2f4554",
          "#61a0a8",
          "#d48265",
          "#91c7ae",
          "#749f83",
          "#ca8622",
          "#bda29a",
          "#6e7074",
          "#546570",
          "#c4ccd3",
        ],
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        xAxis: {
          data: arr1,
        },
        yAxis: {},
        series: [
          { 
            name: "数量",
            type: "line",
            data: arr2,
          },
        ],
        textStyle:{
             color: "#fff"
          } 
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    getdata() {
        //  开启加载动画
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });

      // 获取文章分类信息
      Promise.all([
        this.$http.get(http + changelist),
        this.$http.get(http + articlebychannel),
      ]).then(
        (data) => {
          console.log(data[0]);
          //  分类数据
          var typelisty = data[0].data.data;
          // 文章数量
          var num = data[1].data.data;
          // 迭代新的数组
          // 分类数组
          var typearr = typelisty.map((i) => {
            return i.name;
          });
          // 数量数组
          var newnum = num.map((i) => {
            return i.articles;
          });
          console.log(typearr);
          // 生成统计图表
          this.viewopen(typearr, newnum);
          // 结束动画
          setTimeout(() => {
          loading.close();
        }, 500);
        },
        (err) => {
          this.$message.error(err[0].data.msg);
          this.$message.error(err[1].data.msg);
        }
      );
    },
  },
};
</script>

<style>
</style>